/**
 * Created by guiyongdong on 16/9/30.
 */
'use strict';
import React, {Component} from 'react';

import  {
    StyleSheet,
    View,
    Image,
    Text,
    TouchableOpacity,
    PixelRatio,
    Dimensions,
    Platform
} from 'react-native';

var WindowWidth = Dimensions.get('window').width;

var outTime = 20;
var desc = '后结束';

class KillTimeView extends Component{
    // 构造
      constructor(props) {
        super(props);

          var killData = this.props.killData;
          var status = killData['sec_kill_round_status'];
          var time;
          if(status == 0){
              time = killData['sec_kill_round_start_time'];
              desc = '后开始';
          }else  {
              time = killData['sec_kill_round_end_time'];
          }
          var data = new Date(time.replace(/-/g,"/"));
          var timesNow = Date.parse(new Date());
          var timesEnd = Date.parse(data);
          outTime=(timesEnd-timesNow)/1000;
          var hour = parseInt(outTime/3600);
          var minute = parseInt(outTime/60%60);
          var second = parseInt(outTime%60);

          // 初始状态
        this.state = {
            hour:hour<10?'0'+hour:hour,
            minute:minute<10?'0'+minute:minute,
            second:second<10?'0'+second:second
        };
      }
    render() {
        var killData = this.props.killData;
        var paddingZore = {};
        var top = {};
        if (Platform.OS == 'android') {
            paddingZore = {paddingTop:-1/PixelRatio.get()};
            top={top:10}
        }
        return(
            <View style={styles.topView}>
                <Image style={styles.image} resizeMode='stretch' source={require('../../resoure/main/Seckill@3x.png')} />
                <Text style={{marginTop:11,marginLeft:8,fontSize:13,height:17,fontWeight:'bold',color:'black'}}>{killData['sec_kill_round_title']}</Text>
                <Text style={[{marginTop:12,marginLeft:6,paddingLeft:3,paddingTop:1, fontSize:11,borderWidth:1/PixelRatio.get(),height:15,width:20,color:'black'},paddingZore]} >{this.state.hour}</Text>
                <Text style={{marginTop:11,marginLeft:1,fontSize:13,height:17,color:'black'}}>{':'}</Text>
                <Text style={[{marginTop:12,marginLeft:1,paddingLeft:3,paddingTop:1, fontSize:11,borderWidth:1/PixelRatio.get(),height:15,width:20,color:'black'},paddingZore]} >{this.state.minute}</Text>
                <Text style={{marginTop:11,marginLeft:1,fontSize:13,height:17,color:'black'}}>{':'}</Text>
                <Text style={[{marginTop:12,marginLeft:1,paddingLeft:3,paddingTop:1, fontSize:11,borderWidth:1/PixelRatio.get(),height:15,width:20,color:'black'},paddingZore]} >{this.state.second}</Text>
                <Text style={[{marginTop:15,marginLeft:6,fontSize:11,color:'#ADADAD'},paddingZore]}>{desc}</Text>
                <Text style={[{left:21,top:30,fontSize:10,color:'#ADADAD',position:'absolute'}]}>{'限时秒杀'}</Text>
                <Text style={[{top:12,fontSize:12,color:'#727272',position:'absolute',right:30},top]}>{'更多'}</Text>
                <Image style={{width:15,height:15,top:11,position:'absolute',right:15}} resizeMode='stretch' source={require('../../resoure/main/MSYHomeRight.png')} />
            </View>
        );
    }
    componentDidMount() {
        this.timer = setInterval(
            () => {
                outTime--;
                if(outTime<=0){
                    this.timer && clearInterval(this.timer);
                }
                var hour = parseInt(outTime/3600);
                var minute = parseInt(outTime/60%60);
                var second = parseInt(outTime%60);
                this.setState({
                    hour:hour<10?'0'+hour:hour,
                    minute:minute<10?'0'+minute:minute,
                    second:second<10?'0'+second:second
                });
            },
            1000
        );
    }
    componentWillUnmount() {
        // 如果存在this.timer，则使用clearTimeout清空。
        // 如果你使用多个timer，那么用多个变量，或者用个数组来保存引用，然后逐个clear
        this.timer && clearInterval(this.timer);
    }
}


export default class HomeSecKillView extends Component {

    render() {
        var killData = this.props.killData;
        var goodArray = killData['product_list'];
        return(
            <TouchableOpacity activeOpacity={0.8}>
                <View style={this.props.style}>
                    <KillTimeView killData={killData}/>
                    <View style={{width:WindowWidth,height:70 + (WindowWidth - 60)/3.0,flexDirection:'row'}}>
                        {this._renderGoodView(goodArray[0])}
                        <View style={{width:1/PixelRatio.get(),height:60 + (WindowWidth - 60)/3.0,backgroundColor:'#DCDCDC'}}/>
                        {this._renderGoodView(goodArray[1])}
                        <View style={{width:1/PixelRatio.get(),height:60 + (WindowWidth - 60)/3.0,backgroundColor:'#DCDCDC'}}/>
                        {this._renderGoodView(goodArray[2])}
                    </View>
                </View>
            </TouchableOpacity>
        );
    }
    _renderGoodView(good){
        return(
            <View style={styles.goodView}>
                <Image style={{width:(WindowWidth - 60)/3.0,height:(WindowWidth - 60)/3.0,marginLeft:10}} resizeMode='stretch' source={{uri:good['product_avatar_url']}}/>
                <Text style={{marginLeft:10,marginRight:10,marginTop:10,fontSize:12,color:'black'}} numberOfLines={2} >{good['product_title']}</Text>
                <View style={{position:'absolute',left:10,bottom:0,right:10,height:25,flexDirection:'row'}}>
                    <Text style={styles.price}>{'￥'+good['product_sec_kill_price']}</Text>
                    <Text style={styles.marketPrice}>{'￥'+good['product_price']}</Text>
                </View>
            </View>
        );
    }


}
const styles = StyleSheet.create({
    topView:{
        height:55,
        width:WindowWidth,
        flexDirection:'row'
    },
    image:{
        width:58,
        height:17,
        marginLeft:15,
        marginTop:10
    },
    goodView:{
        width:WindowWidth/3.0,
        height:70 + (WindowWidth - 60)/3.0
    },
    price:{
        fontSize:14,
        color:'#FF5050',
        marginTop:2
    },
    marketPrice:{
        marginLeft:3,
        fontSize:10,
        color:'#999999',
        marginTop:5
    }
});